<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"/>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        a {
            /*去除下划线*/
            text-decoration: none;
           /* font-size: 16px;*/
            color: darkgray;
        }

        body {
            background-color: rgba(8, 5, 5, .2);
            /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
            width: 100%;
            background-size: cover;
            /*放在这里面会被其他标签继承所有要重写*/
            text-align: center;
        }

        #pannel {
            background: white;
            /*改变标签的类型*/
            display: inline-block;
            text-align: left;
            margin-top: 10%;
            padding: 30px;
            /*设置圆角*/
            border-radius: 5px;
            margin-bottom: 10%;
            width: 40%;
            height: 340px;
        }

        #pannel-header {
            text-align: center;
        }

        #pannel-header:first-child {
            font-size: 16px;
            padding: 10px;
        }

        /*面板的中间内容*/
        #pannel-content {

        }

        .user-pwd {
            padding-bottom: 35px;
            height: 38px;
            position: relative;
        }

        .user-pwd img {
            position: absolute;
            left: 5px;
            top: 6px;
        }

        .user-pwd input {
            width: 100%;
            height: 100%;
            padding-left: 38px;
            box-sizing: border-box;
            /*设置圆角*/
            border-radius: 5px;
            /*重写边框，系统会自带边框，不好看*/
            border: 1px solid #dddddd;
        }

        .user-pwd input:focus {
            /*清除自带的边框颜色*/
            outline: none;
            /*重设边框颜色*/
            border-color: red;
            /*设置边框阴影，x\y设为零，上下左右都会有阴影*/
            box-shadow: 0 0 5px yellow;
        }

        /*一些设置*/
        #setting {
            margin-bottom: 15px;
        }

        .forget-pwd {
            float: right;
        }

        /*登录按钮*/
        #btn {
            width: 100%;
            height: 35px;
            /*去掉自带的边框*/
            border: 0px;
            color: white;
            /*  background: orangered;*/
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            background: rgba(255, 69, 0, 0.7);
        }

        #btn:focus {
            /*去掉按钮点击时系统自带的边框*/
            outline: none;
        }

        /*注册按钮*/
        #reg {
            font-size: 13px;
            text-align: center;
            margin: 10px 0;
        }

        #reg a {
            color: orangered;
        }

        /*面板的尾部*/
        #panne-footer {
            height: 38px;
            line-height: 38px;
            text-align: center;
        }

        #panne-footer img {
            width: 30px;
            /*图片的垂直居中*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="head">
    <div class="memu">
        <div class="logo"><img src="images/logo.ico"></div>
        <div class="nav">
            <ul class="nav_firstul">
                <li><a href="home.html">首页</a></li>
                <li><a href="xtgg.html">系统公告</a></li>
                <!-- <li><a href="">论坛与帮助</a></li>  -->
            </ul>
        </div>
        <div class="loginse">
            <a href="login.html">登录</a> &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="register.html">注册</a>
        </div>
    </div>
</div>
<div id="con" style="padding-top:50px;">
    <form name="form" id="form" method="post" action="/LoginServlet?operation=webLogin">
        <div id="pannel">
            <!-- 头部-->
            <div id="pannel-header">
                <h2>登录</h2>
            </div>
            <!-- 中间部分-->
            <div id="pannel-content">
                <div class="user-pwd">
                    <img src="images/mail.png">
                    <input type="email" name="username" placeholder="请输入邮箱"/>
                    <div name="errTip" style="color:red;"></div>
                </div>
                <!-- 账号、密码-->
                <div class="user-pwd">
                    <img src="images/passward.png">
                    <input type="password" name="password" placeholder="请输入密码"/>
                    <div name="errTip" style="color:red;"></div>
                </div>
                <!-- 一些其他的设置-->
                <div id="setting">
                    <label style="cursor:pointer;">
                        <input id="remeber" name="remeber" type="checkbox"/>记住密码</a>
                    </label>
                    <a href="/pages/webviews/forget_password.html" class="forget-pwd">忘记密码?</a>
                </div>
                <div id="error-message"
                     style="display:none;padding:5px 5px 5px 0px;margin:10px 10px 10px 0px;color:red;">
                    <strong>提示: </strong><span></span>
                </div>
                <!-- 登录按钮-->
                <button id="btn" type="submit">登录</button>
                <!-- 注册部分-->
                <div id="reg">
                    我要成为会员&nbsp;&nbsp;|&nbsp;&nbsp; <a href="register.html">注册</a>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="footer">
    <div class="foot">
        <p class="copyright">© 2019 Web Book Store Management platform.</p>
        <p class="footlike"><a href="user_xy.html">用户协议</a> &nbsp; | &nbsp; <a href="contact_us.html">联系我们</a></p>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/static/assets/js/jquery.form.js"></script>
<script type="text/javascript" src="/static/assets/js/template.js"></script>
<script type="text/javascript">
    $(function () {
        //回车提交
        $("body").keyup(function (event) {
            if (event.keyCode == 13) {
                $("form").submit(false);
            }
        });

        $("#form1").validate({
            focusInvalid: false, //当为false时，验证无效时，没有焦点响应
            onkeyup: false,
            submitHandler: function (form) {   //表单提交句柄,为一回调函数，带一个参数：form
                jQuery(form).ajaxSubmit({
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.result) {
                            window.location.href = "pages/book/index.jsp";
                        } else {
                            $("#error-message").css({"display": "block"}).find("span").text(data.message);
                            return false;
                        }
                    },
                    error: function () {
                        $("#error-message").css({"display": "block"}).find("span").text("网络异常,请稍候再试");
                    }
                });
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.next("div"));
            },
            rules: {
                username: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    rangelength: [1, 6]
                }
            },
            messages: {
                username: {
                    required: "请输入邮箱!",
                    email: "邮箱格式输入不正确"
                },
                password: {
                    required: "密码不能为空",
                    rangelength: $.validator.format("密码最小长度:{0}, 最大长度:{1}。")
                }
            }
        });
    });
</script>
</html>